<template>
  <div class="mealList">
    <ball-header :leftArrow="false" title="套餐列表" :border="false" z-index="5">
      <div slot="left" @click="$router.back(-1)"><van-icon name="arrow-left" size="24" color="#000000" /></div>
    </ball-header>
    <div class="container">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getData"
      >
        <router-link :to="routerUrl+'/meal/'+item.id" class="item acea-row row-middle" v-for="(item,index) in mealList" :key="index">
          <div class="pic"><img :src="item.pic" alt=""></div>
          <div class="content acea-row row-column">
            <span class="text">{{item.title}}</span>
            <div class="text2 acea-row row-bottom"><p>￥{{item.guest_price}}/</p><p>人起</p></div>
            <div class="btn">预订</div>
          </div>
        </router-link>
      </van-list>
    </div>
    <!-- <div class="load">
      <div class="text">下拉加载更多</div>
    </div> -->
  </div>
</template>

<script>
import ballHeader from 'components/header'
import api from 'api'
import moment from 'moment'
import config from 'api/config.js'

export default {
  components:{
    ballHeader
  },
  data() {
    return {
      routerUrl:config.routerUrl,
      mealList:[],
      page:1,
      pagesize:10,
      loading:false,
      finished:false,
      dateXinqi:moment(new Date().valueOf()).format("E"),
    }
  },
  created() {
  },
  activated() {    
    // console.log("activated")
    // this.getData()
  },
  methods: {
    getData(){
      let params = {
        courseid:this.courseid,
        page:this.page,
        pagesize:this.pagesize
      }
      this.loading = true
      api.get("/course/courseProductList",params).then(e=>{ 
        if(e.data.products.length != 0){
          this.mealList = this.mealList.concat(e.data.products)
          this.page++
          this.finished = false
        }else{
          this.finished = true
        }
        this.loading = false
        this.refreshing = false
      })
    }
  },
  computed:{
    courseid(){
      return this.$store.state.common.courseid
    }
  }
}
</script>

<style scoped>
  .mealList{
    min-height: 100vh;
    /* background: #f2f3f5;s */
  }
  .mealList .container{
    padding: 0 20px;
    background-color: #ffffff;
  }
  .mealList .container .item{
    padding: 20px 0;
    border-bottom: 1px solid #dddddd;
  }
  .mealList .container .item .pic{
    width: 200px;
    height: 150px;
  }
  .mealList .container .item .content{
    flex: 1;
    margin-left: 20px;
  }
  .mealList .container .item .content .text{
    font-size: 28px;
    color: #000000;
  }
  .mealList .container .item .content .text2{
    color: #ff6600;
    margin-top: 15px;
  }
  .mealList .container .item .content .text2 p:first-of-type{
    font-size: 30px;
  }
  .mealList .container .item .content .text2 p:nth-child(2){
    font-size: 20px;
    /* margin: 0 0 5px 0; */
  }
  .mealList .container .item .content .btn{
    width: 120px;
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    background-color: #ff6600;
    border-radius: 25px;
    margin-top: 30px;
  }
  .mealList .load{
    margin-top: 20px;
  }
  .mealList .load .text{
    text-align: center;
    font-size: 26px;
    line-height: 32px;
    color: #a4a5a7;
  }
</style>